<template style="width: 100%">
  <el-container style="height: 100%; border: 1px solid #eee">

    <el-container>
      <el-header style="text-align: left ;font-family: 华文行楷;font-size: 24px">
        <i>留言</i>
        <el-button type="info" style="margin-left: 91%" icon="el-icon-edit-outline"></el-button>
      </el-header>

      <el-main>
        <el-card class="box-card" v-for="(item) in tableData" :key="item._id" shadow="hover" style=" font-size: 14px;margin:5px">
          <div slot="header" class="clearfix" style="display: flex;">
            <span class="el-icon-s-custom"  style="flex: 1; text-align: left">{{ item.title }}</span>
            <span style="flex: 1">{{ item.createTime }}</span>
            <el-dropdown style="flex: 1; text-align: right">
              <i class="el-icon-setting" ></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>查看</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <p style="text-align: left">{{ item.commentBlog }}</p>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import axios from '@/api/request'
  export default {
    name: "message",
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      test: () => {
        axios({
          url: "http://localhost:8888/mongodb/all"
        }).then(res => {
          this.tableData = res.data
        })
      }
    },
    created() {
      axios({
        url: "http://localhost:8888/mongodb/all"
      }).then(res => {
        this.tableData = res
      })
    }
  };
</script>


<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>